* {
  margin: 0;
  padding: 0;
}

.box {
  width: 753px;
  margin: 0 auto;
  position: relative;
}

.box nav {
  z-index: 99;
  width: 753px;
  height: 85px;
  margin: 0 auto;
  position: fixed;
}

.box nav .topnav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.box nav .topnav .leftinp {
  height: 55px;
  width: 650px;
  padding: 15px 0 10px 25px;
  position: relative;
}

.box nav .topnav .leftinp::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 40px;
  width: 28px;
  height: 28px;
  background: url(../images/home-common.png) no-repeat -1px -1px;
}

.box nav .topnav .leftinp input {
  outline: none;
  font-size: 30px;
  width: 647px;
  height: 56px;
  border-radius: 50px;
  text-indent: 2em;
  border: 1px solid white;
}

.box nav .topnav .rightwo {
  width: 60px;
  margin-right: 10px;
  margin-left: 10px;
  padding-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

.box nav .topnav .rightwo .rightimg {
  display: block;
  width: 60px;
  height: 40px;
  background: url(../images/home-common.png) no-repeat -1px -73px;
}

.box nav .topnav .rightwo .rightwode {
  color: white;
  display: block;
  width: 100%;
  height: 30px;
  font-size: 20px;
}

.box {
  overflow: hidden;
}

.box .banner {
  width: 753px;
  height: 450px;
  position: relative;
}

.box .banner .bannerimg {
  width: 100%;
  height: 450px;
  transform: translateX(-753px);
  transition: transform 1s;
}

.box .banner .bannerimg ul {
  list-style: none;
  width: 600%;
  display: flex;
}

.box .banner .bannerimg ul li {
  width: 753px;
  height: 450px;
}

.box .banner .bannerdian {
  z-index: 100;
  width: 140px;
  height: 20px;
  position: absolute;
  bottom: 100px;
  left: 610px;
}

.box .banner .bannerdian ol {
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.box .banner .bannerdian ol li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
}

.box .banner .bannerdian ol li.active {
  border-radius: 50px;
  width: 40px;
}

.box .title {
  width: 705px;
  height: 130px;
  position: absolute;
  top: 375px;
  left: 50%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0px 1px 5px black;
  transform: translate(-50%, 0);
  padding: 0 30px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box .title .mintitle {
  width: 100px;
  height: 100px;
}

.box .title .mintitle .titletext {
  font-size: 20px;
}

.box .title .mintitle .titleimg1 {
  width: 52px;
  height: 60px;
  margin: 5px auto;
  background: url(../images/home-fivemain.png) no-repeat -14px -15px;
}

.box .title .mintitle .titleimg2 {
  width: 65px;
  height: 60px;
  margin: 5px auto;
  background: url(../images/home-fivemain.png) no-repeat -5px -97px;
}

.box .title .mintitle .titleimg3 {
  width: 66px;
  height: 60px;
  margin: 5px auto;
  background: url(../images/home-fivemain.png) no-repeat -7px -170px;
}

.box .title .mintitle .titleimg4 {
  width: 68px;
  height: 60px;
  margin: 5px auto;
  background: url(../images/home-fivemain.png) no-repeat -6px -257px;
}

.box .title .mintitle .titleimg5 {
  width: 66px;
  height: 60px;
  margin: 5px auto;
  background: url(../images/home-fivemain.png) no-repeat -7px -329px;
}

.box .xunxian {
  width: 700px;
  height: 390px;
  margin: 0  auto;
  margin-top: 75px;
  border-radius: 15px;
  display: flex;
  overflow: hidden;
  color: white;
}

.box .xunxian .xunxian1 {
  width: 195px;
  height: 100%;
}

.box .xunxian .xunxian1 .xunxiannei {
  width: 100%;
  height: 130px;
  border: 1px solid white;
  border-left: 0;
  text-align: left;
  line-height: 127px;
  font-size: 30px;
  padding-left: 20px;
  box-sizing: border-box;
}

.box .xunxian .xunxian1 .xunxiannei:nth-child(1) {
  background: url(../images/grid-nav-items-hotel.png) no-repeat;
  background-position-y: 100%;
  background-position-x: 45px;
  background-color: #FA5F56;
  border-top: 0;
}

.box .xunxian .xunxian1 .xunxiannei:nth-child(2) {
  background: url(../images/grid-nav-items-flight.png) no-repeat;
  background-position-y: 100%;
  background-position-x: 35px;
  background-color: #4B94ED;
}

.box .xunxian .xunxian1 .xunxiannei:nth-child(3) {
  background: url(../images/grid-nav-items-travel.png) no-repeat;
  background-position-y: 100%;
  background-position-x: 8px;
  background-color: #3DC59C;
  border-bottom: 0;
}

.box .xunxian .xunxian2 {
  width: 168px;
  height: 100%;
}

.box .xunxian .xunxian2 .xunxiannei {
  width: 100%;
  height: 130px;
  border: 1px solid white;
  border-top: 0;
  text-align: center;
  line-height: 130px;
  font-size: 30px;
}

.box .xunxian .xunxian2 .xunxiannei:nth-child(1) {
  background: url(../images/grid-nav-items-minsu.png) no-repeat;
  background-color: #FA5F56;
}

.box .xunxian .xunxian2 .xunxiannei:nth-child(2) {
  background: url(../images/grid-nav-items-train.png) no-repeat;
  background-color: #4B94ED;
}

.box .xunxian .xunxian2 .xunxiannei:nth-child(3) {
  background: url(../images/grid-nav-items-dingzhi.png) no-repeat;
  background-position-y: 100%;
  background-color: #3DC59C;
  border-bottom: 0;
}

.box .xunxian .xunxian3 {
  width: 166px;
  height: 100%;
  background-color: darkblue;
}

.box .xunxian .xunxian3 .xunxiannei {
  width: 100%;
  height: 130px;
  border: 1px solid white;
  border-top: 0;
  text-align: center;
  line-height: 128px;
  font-size: 30px;
}

.box .xunxian .xunxian3 .xunxiannei:nth-child(1) {
  background-color: #FA5F56;
  border-top: 0;
}

.box .xunxian .xunxian3 .xunxiannei:nth-child(2) {
  background-color: #4B94ED;
}

.box .xunxian .xunxian3 .xunxiannei:nth-child(3) {
  background-color: #3DC59C;
  border-bottom: 0;
}

.box .xunxian .xunxian4 {
  width: 168px;
  height: 100%;
}

.box .xunxian .xunxian4 .xunxiannei {
  width: 100%;
  height: 130px;
  border: 1px solid white;
  border-top: 0;
  border-right: 0;
  text-align: center;
  line-height: 128px;
  font-size: 30px;
}

.box .xunxian .xunxian4 .xunxiannei:nth-child(1) {
  background: url(../images/grid-nav-items-jhj.png) no-repeat;
  background-position-y: 100%;
  background-position-x: 35px;
  background-color: #FA5F56;
}

.box .xunxian .xunxian4 .xunxiannei:nth-child(2) {
  background-color: #4B94ED;
}

.box .xunxian .xunxian4 .xunxiannei:nth-child(3) {
  background-color: #3DC59C;
}

.box .qita {
  width: 700px;
  height: 200px;
  margin: 24px auto;
  display: flex;
  flex-wrap: wrap;
}

.box .qita .qitanei {
  width: 140px;
  height: 80px;
  text-align: center;
}

.box .qita .qitanei .qitaimg {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.box .qita .qitanei .qitatext {
  display: block;
  font-size: 23px;
}

.box .qita .qitanei:nth-child(1) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -7px -6px;
}

.box .qita .qitanei:nth-child(2) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -10px -65px;
}

.box .qita .qitanei:nth-child(3) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -8px -118px;
}

.box .qita .qitanei:nth-child(4) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -7px -172px;
}

.box .qita .qitanei:nth-child(5) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -5px -231px;
}

.box .qita .qitanei:nth-child(6) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -9px -288px;
}

.box .qita .qitanei:nth-child(7) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -6px -349px;
}

.box .qita .qitanei:nth-child(8) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -6px -405px;
}

.box .qita .qitanei:nth-child(9) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -7px -457px;
}

.box .qita .qitanei:nth-child(10) .qitaimg {
  background: url(../images/un_ico_subnav.png) no-repeat -7px -510px;
}

.box .temai {
  width: 100%;
  height: 520px;
  box-sizing: border-box;
  padding: 20px 20px;
  border: 2px solid #ccc;
  border-left: 0;
  border-right: 0;
}

.box .temai .temaitop {
  width: 710px;
  height: 45px;
  display: flex;
  justify-content: space-between;
}

.box .temai .temaitop .temaitopleft {
  background-image: url(../images/un_home_text.png);
  width: 112px;
  height: 30px;
}

.box .temai .temaitop .temaitopright {
  width: 110px;
  background-image: linear-gradient(to right, purple, magenta);
  color: white;
  text-align: center;
  line-height: 45px;
  border-radius: 30px;
  font-size: 25px;
}

.box .temai .temainei {
  margin-top: 30px;
  width: 710px;
  height: 405px;
}

.box .temai .temainei .temaineileft {
  width: 350px;
  height: 100%;
  background-color: #f9f9f9;
}

.box .temai .temainei .temaineileft .temaiimg {
  width: 100%;
  height: 202px;
  background: url(../images/pic-tmh-01.jpg) no-repeat;
}

.box .temai .temainei .temaineileft .temaitext {
  width: 100%;
  height: 175px;
  box-sizing: border-box;
  padding: 30px 20px;
}

.box .temai .temainei .temaineileft .temaitext span:nth-child(1) {
  display: block;
  width: 310px;
  height: 70px;
  font-size: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.box .temai .temainei .temaineileft .temaitext span:nth-child(2) {
  display: block;
  margin: 25px 0;
  width: 100%;
  height: 30px;
  font-size: 25px;
  color: red;
}

.box .temainei {
  display: flex;
}

.box .temainei .temaineiright {
  margin-left: 10px;
  width: 350px;
  height: 405px;
  display: flex;
  flex-wrap: wrap;
}

.box .temainei .temaineiright .temaineirighttop {
  background-color: #F9F9F9;
  width: 350px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.box .temainei .temaineiright .temaineirighttop .texts {
  display: flex;
  flex-direction: column;
  width: 175px;
  height: 65px;
}

.box .temainei .temaineiright .temaineirighttop .texts span:nth-child(1) {
  font-size: 35px;
  color: red;
  font-weight: bolder;
}

.box .temainei .temaineiright .temaineirighttop .texts span:nth-child(2) {
  font-size: 25px;
}

.box .temainei .temaineiright .temaineirighttop .imgs {
  display: block;
  width: 100px;
  height: 100px;
  background: url(../images/pic-tmh-02.png);
}

.box .temainei .temaineiright .temaineirightbotleft {
  width: 170px;
  height: 220px;
  background-color: #F9F9F9;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.box .temainei .temaineiright .temaineirightbotleft .texts {
  text-align: center;
  width: 130px;
  height: 70px;
  font-size: 30px;
  margin: 0 auto;
  margin-top: 30px;
}

.box .temainei .temaineiright .temaineirightbotleft .texts span:nth-child(1) {
  color: skyblue;
  font-weight: bolder;
}

.box .temainei .temaineiright .temaineirightbotleft .imgs {
  width: 100px;
  height: 100px;
  background-image: url(../images/pic-tmh-03.png);
  margin: 5px auto;
}

.box .temainei .temaineiright .temaineirightbotright {
  width: 170px;
  height: 220px;
  background-color: #F9F9F9;
  margin-left: 10px;
  margin-top: 6px;
}

.box .temainei .temaineiright .temaineirightbotright .texts {
  text-align: center;
  width: 150px;
  height: 70px;
  font-size: 30px;
  margin: 0 auto;
  margin-top: 30px;
}

.box .temainei .temaineiright .temaineirightbotright .texts span:nth-child(1) {
  color: skyblue;
  font-weight: bolder;
}

.box .temainei .temaineiright .temaineirightbotright .imgs {
  width: 100px;
  height: 100px;
  background-image: url(../images/pic-tmh-04.png);
  margin: 5px auto;
}

.box .hosthd {
  margin-top: 20px;
  width: 100%;
  height: 705px;
  border: 2px solid #CCCCCC;
  border-left: 0;
  border-right: 0;
}

.box .hosthd .hosthdtop {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 25px;
  padding-left: 22px;
  padding-right: 22px;
}

.box .hosthd .hosthdtop .hosthdtopleft {
  width: 350px;
  height: 35px;
  display: flex;
}

.box .hosthd .hosthdtop .hosthdtopleft span:nth-child(1) {
  display: block;
  width: 155px;
  height: 35px;
  background: url(../images/un_home_text.png) no-repeat 0 -39px;
}

.box .hosthd .hosthdtop .hosthdtopleft span:nth-child(2) {
  display: block;
  width: 75px;
  height: 30px;
  background: url(../images/icon-gg.png) no-repeat;
  margin-left: 30px;
}

.box .hosthd .hosthdtop .hosthdtopright {
  width: 205px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
  font-weight: bolder;
  border-radius: 20px;
  background-image: linear-gradient(to right, red, blue, green);
}

.box .hosthd .hostbot {
  width: 100%;
  height: 620px;
}

.box .hosthd .hostbot .hostbottop {
  width: 100%;
  height: 260px;
  display: flex;
}

.box .hosthd .hostbot .hostbottop .hostbottopnei {
  width: 50%;
  height: 100%;
  border: 1px solid #ccc;
}

.box .hosthd .hostbot .hostbottop .hostbottopnei:nth-child(1) {
  border-left: 0;
}

.box .hosthd .hostbot .hostbottop .hostbottopnei:nth-child(1) .hostbottopneitext:nth-child(1) {
  height: 100%;
  background: url(../images/huodong01.png);
}

.box .hosthd .hostbot .hostbottop .hostbottopnei:nth-child(2) {
  border-right: 0;
}

.box .hosthd .hostbot .hostbottop .hostbottopnei:nth-child(2) .hostbottopneitext:nth-child(1) {
  height: 100%;
  background: url(../images/huodong02.png);
}

.box .hosthd .hostbot .hostbotcent {
  width: 100%;
  height: 160px;
  background: red;
  display: flex;
}

.box .hosthd .hostbot .hostbotcent .hotbotcentleft {
  width: 50%;
  height: 100%;
  background: url(../images/huodong03.jpg);
  border: 1px solid #ccc;
  border-left: 0px;
}

.box .hosthd .hostbot .hostbotcent .hotbotcentright {
  width: 50%;
  height: 100%;
  background: url(../images/huodong04.jpg);
  border: 1px solid #ccc;
  border-right: 0px;
}

.box .hosthd .hostbot .hostbotbot {
  width: 100%;
  height: 160px;
  display: flex;
}

.box .hosthd .hostbot .hostbotbot .hostbotbottleft {
  width: 50%;
  height: 100%;
  background: url(../images/huodong05.jpg);
  border: 1px solid #ccc;
  border-left: 1px;
}

.box .hosthd .hostbot .hostbotbot .hostbotbotright {
  width: 50%;
  height: 100%;
  background: url(../images/huodong06.jpg);
  border: 1px solid #ccc;
  border-right: 1px;
}

.box .dianjhua {
  width: 100%;
  height: 120px;
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 50px;
}

.box .dianjhua .tubiao {
  width: 145px;
  height: 90px;
  text-align: center;
}

.box .dianjhua .tubiao1 span:nth-child(1) {
  display: block;
  font-size: 40px;
}

.box .dianjhua .tubiao1 span:nth-child(2) {
  display: block;
  font-size: 20px;
}

.box .dianjhua .tubiao2 span:nth-child(1) {
  display: block;
  font-size: 40px;
}

.box .dianjhua .tubiao2 span:nth-child(2) {
  display: block;
  font-size: 20px;
}

.box .dianjhua .tubiao3 span:nth-child(1) {
  display: block;
  background: url(../images/home-common.png) no-repeat -1px -157px;
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

.box .dianjhua .tubiao3 span:nth-child(2) {
  display: block;
  font-size: 20px;
}

.box .boxbtn {
  width: 100%;
  height: 135px;
  box-sizing: border-box;
  padding: 25px 0px;
  font-size: 25px;
  text-align: center;
}

.box .boxbtn .boxbtntop {
  display: block;
  width: 405px;
  margin: 0 auto;
}

.box .boxbtn .boxbtnbtn {
  width: 630px;
  display: block;
  margin: 5px auto;
  color: #999;
}
